import 'package:banyou_app/app/config/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/src/size_extension.dart';
import 'package:photo_view/photo_view_gallery.dart';

typedef PageChanged = void Function(int index);

class PictureOverview extends StatefulWidget {
  final List imageItems; //图片列表
  final int defaultIndex; //默认第几张
  final PageChanged? pageChanged; //切换图片回调
  final Axis direction; //图片查看方向

  PictureOverview({
    required this.imageItems,
    this.defaultIndex = 0,
    this.pageChanged,
    this.direction = Axis.horizontal,
  });
  @override
  _PictureOverviewState createState() => _PictureOverviewState();
}

class _PictureOverviewState extends State<PictureOverview> {
  int currentIndex = 0;
  @override
  void initState() {
    super.initState();
    currentIndex = widget.defaultIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        InkWell(
          onTap: () {
            Navigator.pop(context);
          },
          child: PhotoViewGallery.builder(
              // gaplessPlayback: true,
              allowImplicitScrolling: true,
              scrollPhysics: const BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  imageProvider: NetworkImage(widget.imageItems[index]),
                );
              },
              loadingBuilder: (context, event) {
                return Container(
                  alignment: Alignment.center,
                  child: const CircularProgressIndicator(
                    strokeWidth: 3,
                    color: ColorConfig.app_main,
                  ),
                );
              },
              scrollDirection: widget.direction,
              itemCount: widget.imageItems.length,
              backgroundDecoration: BoxDecoration(color: Colors.transparent),
              pageController: PageController(initialPage: widget.defaultIndex),
              onPageChanged: (index) => setState(() {
                    currentIndex = index;
                    if (widget.pageChanged != null) {
                      widget.pageChanged!(index);
                    }
                  })),
        ),
        Positioned(
          top: 50,
          child: Container(
              alignment: Alignment.center,
              width: MediaQuery.of(context).size.width,
              child: Text("${currentIndex + 1}/${widget.imageItems.length}",
                  style: TextStyle(
                    decoration: TextDecoration.none,
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w400,
                    shadows: [
                      Shadow(color: Colors.black, offset: Offset(1, 1)),
                    ],
                  ))),
        ),
        Positioned(
          //右上角关闭
          top: 40,
          right: 20,
          child: Container(
            alignment: Alignment.centerLeft,
            child: GestureDetector(
                onTap: () {
                  //隐藏预览
                  Navigator.pop(context);
                },
                child: Image.asset(
                  'assets/images/tab-关闭.png',
                  width: 30,
                )),
          ),
        ),
        // Positioned(
        //   //数量显示
        //   // right: 20,
        //   top: 40,
        //   child: Text(
        //     '${currentIndex + 1}/${widget.imageItems.length}',
        //     style: TextStyle(color: Colors.black),
        //   ),
        // )
      ],
    );
  }
}
